<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="3">
        <el-tree
          ref="regionTree"
          :data="regionTreeData"
          node-key="id"
          :expand-on-click-node="false"
          default-expand-all
          highlight-current
          @node-click="regionTreeClick"
        ></el-tree>
      </el-col>
      <el-col :span="5">
        <el-form ref="searchForm" label-width="100px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="摄像头名称">
                <el-input v-model="sd.searchName" size="small" placeholder="摄像头名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button class="mt_5" type="primary" size="mini" icon="el-icon-search" @click="searchCamera">查询</el-button>
              <el-button class="mt_5" type="primary" size="mini" icon="el-icon-refresh" @click="updateCamera">更新</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="cameraList" border style="width: 100%" @row-click="cameraClick">
          <el-table-column label="摄像头(前100条)" prop="name"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <table class="mytable" style="margin-top: 50px;">
          <tr>
            <th style="width: 200px;">摄像头名称</th>
            <td>{{ activeCameraData.name }}</td>
          </tr>
          <tr>
            <th>摄像头编号</th>
            <td>{{ activeCameraData.indexcode }}</td>
          </tr>
          <tr>
            <th>区域名称</th>
            <td>{{ activeCameraData.regionname }}</td>
          </tr>
          <tr>
            <th>排序号</th>
            <td>{{ activeCameraData.sort }}</td>
          </tr>
          <tr>
            <th>接入协议</th>
            <td>{{ activeCameraData.treatytype }}</td>
          </tr>
          <tr>
            <th>传输协议</th>
            <td>{{ activeCameraData.transtype }}</td>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      regionTreeData: [],
      sd: {
        activeRegionCode: '',
        searchName: '',
      },
      cameraList: [],
      activeCameraId:0,
      activeCameraData:{}
    }
  },
  mounted() {
    this.getRegionTreeData()
  },
  watch:{
    activeCameraId(newVal,oldVal){
      this.getCameraData();
    }
  },
  methods: {
    getRegionTreeData() {
      request({
        url: '/hikdata/gethikregiontreenode',
        data: {},
      }).then((res) => {
        const { data } = res
        this.regionTreeData = data
        if (this.regionTreeData.length > 0) {
          this.sd.activeRegionCode = this.regionTreeData[0].id
          this.searchCamera()
        }
      })
    },
    regionTreeClick(treeNode) {
      this.sd.activeRegionCode = treeNode.id
      this.searchCamera()
    },
    cameraClick(row){
      this.activeCameraId=row.id
    },
    getCameraData(){
      request({
        url: '/hikdata/getcameradata',
        data: {id: this.activeCameraId},
      }).then((res) => {
        const { data } = res
        this.activeCameraData = data
      })
    },
    searchCamera() {
      request({
        url: '/hikdata/listregioncamera',
        data: this.sd,
      }).then((res) => {
        const { data } = res
        this.cameraList = data
        if (this.cameraList.length > 0) {
          this.activeCameraId = this.cameraList[0].id
        }
      })
    },
    updateCamera() {
      request({
        url: '/hikdata/updatecamera',
        data: {},
      }).then((res) => {
        if (res.code === '200') {
          this.$message.success(res.msg)
        }
      })
    },
  },
}
</script>

<style scoped>
</style>
